import React from 'react';
import { Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
import styles from '../index.less';

const getOption = (data, count) => {
    const option = {
        tooltip: {
            // formatter: '{a}: {value/count}%'
            formatter(parames) {
                const rate = `${parames.seriesName}：${Number(parames.data).toFixed(2)}%`
                return rate;
            }
        },
        grid: {
            bottom: 70
        },
        legend: {
            type: 'scroll',
            left: 50,
            right: 50,
            bottom: 0,
            itemGap: 16,
            data: data.map(item => item.name)
            // width: 600,
            // textStyle: {
            //     rich: {
            //         a: {
            //             width: 150,
            //             color: '#999'
            //         }
            //     }
            // },
            // formatter (name) {
            //     // 对name参数进行操作，返回想要的样例格式
            // //  return echarts.format.truncateText(name, 100);//number控制样例的宽度
            //     return `{a|${name}}`
            // }
        },
        xAxis: {
            // show: false,
            type: 'category',
            axisLabel: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#d5d5d5'
                }
            },
            data: ['Rate']
        },
        yAxis: {
            type: 'value',
            name: '单位：%',
            textStyle: {
                fontSize: 12
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                interval: 5
                // formatter: '{value}%'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#e7e7e7'
                }
            },
            splitNumber: 5

            // min: 0,
            // max: 100
        },
        // dataZoom: [
        //     {
        //         type: 'slider',
        //         show: true,
        //         height: 10,
        //         left: '10%',
        //         right: '10%',
        //         bottom: '10%',
        //         start: 0,
        //         end: 20,
        //         textStyle: {
        //             color: '#d4ffff',
        //             fontSize: 11
        //         },
        //         xAxisIndex: 0
        //     }, {
        //         type: 'inside'
        //     }

        // ],
        series: data.map(item => ({
            data: [((item.value / count) * 100).toFixed(2)],
            name: item.name,
            type: 'bar',
            // barWidth: '20%'
            // label: {
            //     normal: {
            //         show: true,
            //         position: 'top',
            //         formatter(params) {
            //             console.log('parames', params);
            //             const rate = `${((Number(item.value) / Number(count)) * 100).toFixed(2)}%`
            //             return rate;
            //         },
            //         textStyle: {
            //             fontSize: 12
            //         }
            //     }
            // },
            xAxisIndex: 0
        }))
        // series: [
        //     {
        //         name: '微微科技有限公司',
        //         type: 'bar',
        //         data: [22]
        //     },
        //     {
        //         name: '运营中心',
        //         type: 'bar',
        //         data: [5]
        //     },
        //     {
        //         name: '产品中心',
        //         type: 'bar',
        //         data: [33]
        //     }
        // ]
    };

    return option;
};

const RzrygbFb = ({ data, count }) => (
    <div>
        <div className={styles.chartTitle} style={{ marginTop: 0 }}>新入职员工部门分布</div>
        {!data || data.length === 0 ? (
            <Empty style={{ margin: '90px 0' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
        ) : (
            <ReactEcharts option={getOption(data, count)} style={{ height: '350px' }}/>
        )}
        {/* <ReactEcharts option={getOption(data)} /> */}
    </div>
);

export default RzrygbFb;
